import { useEffect, useRef, useState } from "react"
import { Form, Input, Button, DatePicker, Card } from "antd"
import { SearchOutlined } from "@ant-design/icons"
// 接口
import { Statistics } from "@api/statistics"
// 元素
import * as echarts from "echarts"

export default function Index() {
  const [form] = Form.useForm()
  const DatePick: any = DatePicker
  // 图表
  const [chart, setChart] = useState<any>({})
  const [data, setData] = useState<any>()

  const refTable = useRef<any>(null)
  // 查询功能,每次查找到都查询渲染图表，刚开始打开不需要渲染，所以不用写在挂载里
  const onFinish = async (values: any) => {
    const data = await Statistics({ values })
    setData(data)
    const option = {
      title: {
        text: "挂号量统计",
      },
      xAxis: {
        type: "category",
        data: data.dateList, // 下侧日期显示
      },
      yAxis: {
        type: "value",
      },
      series: {
        data: data.countList, //数据
        type: "line",
      },
    }
    option && chart.setOption(option)
  }

  // 使用useRef拿到元素，再使用echarts渲染页面
  useEffect(() => {
    // 挂载获取并保存元素,在外面就不会获取到null
    const myChart = echarts.init(refTable.current)
    setChart(myChart)
  }, [])

  return (
    <Card>
      <Form form={form} name="basic" layout="inline" onFinish={onFinish}>
        <Form.Item name="hosname">
          <Input placeholder="点击输入医院名称" />
        </Form.Item>
        <Form.Item name="createTimeBegin">
          <DatePick placeholder="选择开始日期" />
        </Form.Item>

        <Form.Item name="createTimeEnd">
          <DatePick placeholder="选择截止日期" />
        </Form.Item>
        <Form.Item style={{ marginBottom: 20 }}>
          <Button
            type="primary"
            htmlType="submit"
            icon={<SearchOutlined />}
            className="hospital-btn m"
            style={{ marginRight: 10 }}
          >
            查询
          </Button>
        </Form.Item>
      </Form>
      <div
        ref={refTable}
        style={{ height: 400, width: 1336, marginTop: 10 }}
      ></div>
    </Card>
  )
}
